<template>
	<div v-if="menuloading">
		<div v-if="navMenus.length<=0" style="padding:20px;">
			<el-alert title="无子集信息" center type="info" :closable="false"></el-alert>
		</div>
		
		<template v-for="navMenu in navMenus">
			<div class="menuArea">
			<el-menu-item  v-if="hasChildren(navMenu)"
			:class="currentCode===navMenu.code?'menuitemactive':'' "
			@click="btnClick(navMenu)"
			>
			
				<template #title>
					<div class="itemtext">
						<span>{{navMenu.name}}</span>
					</div>
				</template>
			</el-menu-item>
			<el-sub-menu v-else :index="navMenu.code">
				<template #title>
					<div class="itemtext" :class="currentCode===navMenu.code?'subitemactive':'' "  @click="btnClick(navMenu)">
						<span>{{navMenu.name}}</span>
					</div>
				</template>
				<helpMenu v-if="navMenu.children.length>0" :navMenus="navMenu.children" :currentCode="currentCode" :menuloading="menuloading" @itemclick="itemclick"></helpMenu>
			</el-sub-menu>
			</div>
		</template>
	</div>
	<div v-else>

	</div>
</template>

<script>
	export default {
		name: 'NavMenu',
		//props: ['navMenus'],
		props: {
			navMenus: {type: Array, default: []},
			currentCode: {type: String, default: ""},
			menuloading: {type: Boolean, default: true},	
		},
		data() {
			
		},
		watch:{
		},
		created(){
			
		},
		methods: {
			hasChildren(item) {
				return item.children.length==0
			},btnClick(navMenu){
				this.$emit('itemclick',  navMenu);
				return true;
				//tool.data.set("currTabmenu", navMenu.code);
			},
			itemclick(navMenu) {
				this.$emit('itemclick',  navMenu);
				//tool.data.set("currTabmenu", navMenu.code);
			}
		}
	}
</script>
<style>
	.menuArea{
		margin-left: 0px;
		margin-right: 0px;
	}
	.el-menu-item{
		padding-left: 10px !important;
		border-radius: 4px;
  width: 256px;
  height: 42px;
  margin: 2px 0 0 0px;
  border: 1px #fff solid;

	}


	.el-menu-item:hover {
		border: 1px rgba(65,75,255, 0.2) solid;
		background-color: #fff;
	}


	.el-menu-item span{
		width: 68px;
		/*height: 16px;*/
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 14px;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		margin-top: 1px;
		font-family: PingFangSC-Regular;
	}



	.el-sub-menu .el-menu-item{
		padding-left: 30px !important;
		height: 42px;

	}



	.el-sub-menu__title{
		padding-left: 10px !important;
		margin-right: 10px;
	}
	.el-sub-menu .el-sub-menu .el-sub-menu__title{
		padding-left: 30px !important;
		margin-right: 10px;
	}
	.el-sub-menu__title:hover{
		background-color: #F7F8FA !important;
	}


	.el-sub-menu span{
		width: 68px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 14px;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		font-family: PingFangSC-Regular;
	}

	.el-sub-menu .el-sub-menu__icon-arrow {
		font-size: 14px;
	}


	.el-sub-menu .el-sub-menu{
		/*margin-left: 20px !important;*/
	}

	.el-sub-menu .el-sub-menu .el-menu-item{
		padding-left: 40px !important;
		
	}

	.el-sub-menu__title:has(.subitemactive){
		background-image: linear-gradient(
    205deg,
    rgba(235, 242, 255, 1) 0,
    rgba(235, 242, 255, 1) 0,
    rgba(222, 228, 253, 1) 100%,
    rgba(222, 228, 253, 1) 100%
  );
  border-radius: 4px;
	}

	.menuitemactive{
		background-image: linear-gradient(
    205deg,
    rgba(235, 242, 255, 1) 0,
    rgba(235, 242, 255, 1) 0,
    rgba(222, 228, 253, 1) 100%,
    rgba(222, 228, 253, 1) 100%
  );
	}
	.menuitemactive .el-icon{

  color: rgba(65,75,255, 1);
    background: -webkit-linear-gradient(45deg, rgba(65,75,255, 1), rgba(46,149,248, 1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	}


/*
	.menuitemactive{
		background: linear-gradient(118deg, #427CFF, rgba(106, 131, 252, .7));
		-webkit-box-shadow: 0 0 10px 1px rgba(106,131,252,.7);
		box-shadow: 0 0 10px 1px rgba(106,131,252,.7);
		color: #fff;
		border-radius: 7px;
	}
	.menuitemactive span{
		color: #fff !important;
	}
	*/

	.el-sub-menu .el-sub-menu__title .el-sub-menu__icon-arrow {
  /* 这里可以使用你自己的图标或者其他样式 */
/* 示例：改变图标颜色 */
  background: url(../../../../public/img/syshelpdown.png)
    100% no-repeat;
	width: 12px;
  height: 12px;
  background-size: 100% 100%;
}
.el-sub-menu .el-sub-menu__title .el-sub-menu__icon-arrow svg{
	display: none;
}

.aminui-side .adminui-side-scroll .el-scrollbar{
	border-top-width: 0px;
}

  /*点击关闭*/
  .el-submenu /deep/ .el-submenu__title .el-submenu__icon-arrow{
    -webkit-transform: rotateZ(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotateZ(-90deg);
  }
  /*点击展开*/
  .el-submenu.is-opened /deep/ .el-submenu__title .el-submenu__icon-arrow{
    -webkit-transform: rotateZ(0deg);
    -ms-transform: rotate(0deg);
    transform: rotateZ(0deg);
  }
</style>
